<script lang="ts" setup>
import {reactive} from "vue";
import type {PaginationOption,Columns} from "@/components/PageTable/index";
import TableEmpty from '@/assets/emptys/tableEmpty.png'

defineOptions({
  name: "PageTable"
});

//搜索参数
const {page,size,total,tableData} = defineProps({
  page: Number,
  size: Number,
  total: Number,
  tableData: {
    type:Array,
    default: ()=>[]
  },
  columns:{
    type:Array as PropType<Columns>,
    default: ()=>[]
  }
})

const paginationOption = reactive<PaginationOption>({
  layout:'total,prev, pager, next',
  pageSize: size ?? 10,
  currentPage: page ?? 1,
  total: total ?? 0
})

const emits = defineEmits(['pagination'])
const pageHandler = ()=>{
  emits('pagination',{page:paginationOption.currentPage,size:paginationOption.pageSize})
}
</script>

<template>
  <div class="pageTable">
    <div class="tableContainer">
      <slot v-if="total" />
      <el-table :data="tableData" border fit height="100%" row-key="id" show-overflow-tooltip>
        <el-table-column align="center" label="序号" type="index" width="70" />
        <el-table-column v-for="(column,columnIndex) in columns" :key="columnIndex" :label="column.label" :prop="column.key" :width="column.width ?? 'auto'" align="center">
          <template v-if="column.custom" #default="{row,$index}">
            <slot :index="$index" :name="column.key" :row="row" />
          </template>
        </el-table-column>

        <template #empty>
          <div class="empty">
            <el-empty :image="TableEmpty" :image-size="320" description="暂无数据" />
          </div>
        </template>
      </el-table>
    </div>
    <div class="paginationContainer">
      <el-pagination
        v-model:current-page="paginationOption.currentPage" v-model:page-size="paginationOption.pageSize" :layout="paginationOption.layout"
        :total="paginationOption.total" background size="small" @size-change="pageHandler" @current-change="pageHandler" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.pageTable {
  position: relative;
  margin-top: 2vh;
  flex-grow: 1;
  border-radius: 1vh;
  background-color: #fff;
  box-shadow: -.6vh .6vh #eeeeee;

  .tableContainer {
    position: absolute;
    left: 1%;
    top: 1%;
    width: 98%;
    height: 92%;
    overflow: hidden;

    .empty {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.el-empty__description) {
        margin: 0;
        width: 100%;
        text-align: center;
      }
    }
  }

  .paginationContainer {
    position: absolute;
    left: 1%;
    bottom: 1%;
    width: 98%;
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
